<template>
  <div style="height: 100%">
    <!-- <div
      class="flex w-full"
      v-if="conversationID"
      style="
        justify-content: flex-end;
        padding: 10px;
        border-bottom: 1px solid var(--color-border-default);
      "
    > -->
    <!-- <el-button type="primary" plain @click="createRecord">创建跟进记录</el-button> -->
    <!-- <el-button @click="handlePinnedConversation" type="primary">{{
        isPined.value ? "取消置顶" : "置顶对话"
      }}</el-button> -->

    <!-- <el-popover placement="bottom" :width="300" trigger="click">
        <template #reference>
          <el-button type="primary" plain>转接</el-button>
        </template>
        <div style="height: 60px">
          <span style="padding-right: 10px">选择成员: </span>
          <el-select v-model="value1" placeholder="请选择成员" style="width: 240px">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </el-select>
        </div>
      </el-popover>
      <el-button @click="handleTransfers" type="danger" plain>提交</el-button> -->
    <!-- </div> -->
    <div class="h-full w-full flex">
      <!-- 侧边栏 -->
      <!-- <sidebar /> -->
      <!-- chat -->
      <Message
        v-show="showChat(outside)"
        ref="chatMessageRef"
        @handleConvListClick="handleConvListClick"
      />
      <!-- 右侧用户信息 -->

      <!-- iframe -->
      <frameView v-if="frame.includes(outside)" :type="outside" />
      <component v-else-if="Component[outside]" :is="Component[outside]" />

      <el-dialog v-model="dialogVisible" title="转接" width="500">
        <span>选择成员</span>
        <el-select v-model="value1" placeholder="Select" style="width: 240px">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          />
        </el-select>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="handleTransfers"> Confirm </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { useState } from "@/utils/hooks/useMapper";
import application from "@/electron/components/Application/index.vue";
import sidebar from "./sidebar.vue";
import Message from "./message.vue";
import test from "./test.vue";
import frameView from "./frameView.vue";
import AddressBook from "./AddressBook/index.vue";
import SmartRobot from "@/views/smartRobot/index.vue";
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import { CONVERSATIONTYPE } from "@/constants/index";
import { getUserInfo, getUserGroup, getUserListByCondition } from "@/api/node-admin-api/role.js";
import { assignCustomer, sessinComplete, removeAssign } from "@/api/node-admin-api/chat.js";
import { successMessage, warnMessage, errorMessage } from "@/utils/message";

const store = useStore();
const { dispatch, commit } = useStore();
const showChat = (value) => {
  return outsideList.value[0].only.includes(value);
};
const frame = [
  "document",
  "chatgpt",
  // "github",
  // "gitee"
];
const Component = {
  electron: application, // 应用
  test: test, // 测试
  notebook: SmartRobot,
};

const chatMessageRef = ref(null);
//  当前会话是否已经置顶
const isPined = ref(false);
const conversationID = ref("");

const { outside, outsideList } = useState({
  outsideList: (state) => state.sidebar.outsideList,
  outside: (state) => state.conversation.outside,
});

onMounted(() => {
  getAllUser();
});

// 创建工单
const createRecord = () => {
  successMessage("创建工单，暂时还没做，记得做");
};

//  置顶当前对话的联系人
const handlePinnedConversation = () => {
  if (chatMessageRef.value) {
    chatMessageRef.value.handleClickMenuItem({ id: "pinged" });
  }
};

// 获取当前会话 ID
const handleConvListClick = (val) => {
  const { isPinned } = val;
  isPined.value = isPinned;
  conversationID.value = val.conversationID;
};
const dialogVisible = ref(false);
const value1 = ref("");
const options = ref([]);
const getAllUser = () => {
  getUserListByCondition({ limit: 99999, page: 1 }).then((res) => {
    if (res.code == 20000) {
      const { records = [] } = res.data;
      options.value = records;
    }
  });
};

// 转接对话给别的客服
const handleTransfer = () => {
  if (!conversationID.value) {
    errorMessage("请选择对话，再进行转接动作");
    return;
  }
  dialogVisible.value = true;
};

const handleTransfers = () => {
  if (!value1.value) {
    errorMessage("请选择转接的客服！");
    return;
  }
  const params = {
    sessionId: Number(conversationID.value.replace("GROUP", "")), // 会话id
    userid: value1.value, // 客服uid?
  };
  assignCustomer(params).then((response) => {
    if (response === 20000) {
      successMessage("转接成功！");
      dialogVisible.value = false;
      dispatch("GET_MESSAGE_LIST", {
        type: CONVERSATIONTYPE.UPDATE_CURRENT_SESSION,
        payload: {
          conversationID: conversationID.value,
        },
      });
    }
    dialogVisible.value = false;
  });
};

// 结束当前对话，并刷新左侧列表
const handleFinish = () => {
  if (!conversationID.value) {
    errorMessage("请选择对话，再进行结束操作");
    return;
  }

  sessinComplete({
    complete: true,
    sessionId: Number(conversationID.value),
  }).then((res) => {
    successMessage("结束当前对话成功");
  });
};
</script>

<style lang="scss" scoped></style>
